﻿import QtQuick 2.9
import QtQuick.Controls
import QtQuick.Controls.Basic
// for settings
import QtCore // for 6.5+
// import Qt.labs.settings // for 5.12

Rectangle {
    id: root
    anchors.fill: parent
    property real itemWidth: parent.width
    property real itemHeight: parent.height / 8
    property real left_Label_WidthPercent: 0.25
    property real middle_Comment_WidthPercent: 0.50
    property real right_Switch_WidthPercent: 0.25

    Connections {
        target: mQmlRelaySwitchService
        function onPushSwitchStatus2QmlSignal(channel, state) {
            console.log("pushSwitchStatus2QmlSignal: ", channel, " state: ", state)
            switch (channel) {
            case 1: switch_1.checked = state; break;
            case 2: switch_2.checked = state; break;
            case 3: switch_3.checked = state; break;
            case 4: switch_4.checked = state; break;
            case 5: switch_5.checked = state; break;
            case 6: switch_6.checked = state; break;
            case 7: switch_7.checked = state; break;
            case 8: switch_8.checked = state; break;
            default:
                console.log("pushSwitchStatus2QmlSignal unknow channel ", channel, " state ", state)
            }
        }
    }

    Settings {
        id: settings_switch_status
        category: "SwitchStatus"
        // for Qt 6.5+, not created settings.ini
        location: mQmlRelaySwitchService.settingsPath
        // for Qt 5.12
        // fileName: mQmlRelaySwitchService.settingsPath
        property alias switch1Comment: textfield_1.text
        property alias switch2Comment: textfield_2.text
        property alias switch3Comment: textfield_3.text
        property alias switch4Comment: textfield_4.text
        property alias switch5Comment: textfield_5.text
        property alias switch6Comment: textfield_6.text
        property alias switch7Comment: textfield_7.text
        property alias switch8Comment: textfield_8.text
    }

    Component.onCompleted: {
        mQmlRelaySwitchService.m_s1Comment = settings_switch_status.switch1Comment
        mQmlRelaySwitchService.m_s2Comment = settings_switch_status.switch2Comment
        mQmlRelaySwitchService.m_s3Comment = settings_switch_status.switch3Comment
        mQmlRelaySwitchService.m_s4Comment = settings_switch_status.switch4Comment
        mQmlRelaySwitchService.m_s5Comment = settings_switch_status.switch5Comment
        mQmlRelaySwitchService.m_s6Comment = settings_switch_status.switch6Comment
        mQmlRelaySwitchService.m_s7Comment = settings_switch_status.switch7Comment
        mQmlRelaySwitchService.m_s8Comment = settings_switch_status.switch8Comment
    }

    Column {
        Rectangle {
            /* ***************************************  1  **********************************/
            id: rect_switch1_chunk
            border.color: "black"
            height: itemHeight
            width: itemWidth
            Row {
                Rectangle {
                    height: itemHeight
                    width: itemWidth * left_Label_WidthPercent
                    // color: "red"
                    Label {
                        text: "Switch  1"
                        anchors.centerIn: parent
                        font.family: "Comic Sans MS"
                        color: "#595959"
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * middle_Comment_WidthPercent
                    // color: "green"
                    TextField {
                        id: textfield_1
                        anchors.centerIn: parent
                        width: parent.width
                        height: parent.height - 6
                        placeholderText: "Comment"
                        color: "#595959"
                        background: Rectangle {
                            anchors.fill: parent
                            radius: 8
                            // color: "transparent"
                            // color: "#dfffef"
                            // Rectangle {
                            //     anchors.fill: parent
                            //     anchors.bottomMargin: 2
                            // }
                            border.color: "#dfffef"
                            border.width: 2
                        }
                        leftPadding: 12
                        rightPadding: 12
                        // font.family: "Segoe UI Semilight"
                        font.family: "Comic Sans MS"
                        font.pointSize: 9
                        onTextChanged: {
                            mQmlRelaySwitchService.m_s1Comment = text
                            // settings_switch_status.switch1Comment = text
                        }
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * right_Switch_WidthPercent
                    // color: "blue"
                    MySwitch {
                        id: switch_1
                        anchors.centerIn: parent
                        onClicked: {
                            mQmlRelaySwitchService.setSwitchStatus2MainService(1, !mQmlRelaySwitchService.m_s1);
                        }
                    }
                }
            }
        }
        Rectangle {
            /* ***************************************  2  **********************************/
            id: rect_switch2_chunk
            border.color: "black"
            height: itemHeight
            width: itemWidth
            Row {
                Rectangle {
                    height: itemHeight
                    width: itemWidth * left_Label_WidthPercent
                    // color: "red"
                    Label {
                        text: "Switch  2"
                        anchors.centerIn: parent
                        font.family: "Comic Sans MS"
                        color: "#595959"
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * middle_Comment_WidthPercent
                    // color: "green"
                    TextField {
                        id: textfield_2
                        anchors.centerIn: parent
                        width: parent.width
                        height: parent.height - 6
                        placeholderText: "Comment"
                        color: "#595959"
                        background: Rectangle {
                            anchors.fill: parent
                            radius: 8
                            // color: "transparent"
                            // color: "#dfffef"
                            // Rectangle {
                            //     anchors.fill: parent
                            //     anchors.bottomMargin: 2
                            // }
                            border.color: "#dfffef"
                            border.width: 2
                        }
                        leftPadding: 12
                        rightPadding: 12
                        // font.family: "Segoe UI Semilight"
                        font.family: "Comic Sans MS"
                        font.pointSize: 9
                        onTextChanged: {
                            mQmlRelaySwitchService.m_s2Comment = text
                        }
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * right_Switch_WidthPercent
                    // color: "blue"
                    MySwitch {
                        id: switch_2
                        anchors.centerIn: parent
                        onClicked: {
                            mQmlRelaySwitchService.setSwitchStatus2MainService(2, !mQmlRelaySwitchService.m_s2);
                        }
                    }
                }
            }
        }
        Rectangle {
            /* ***************************************  3  **********************************/
            id: rect_switch3_chunk
            border.color: "black"
            height: itemHeight
            width: itemWidth
            Row {
                Rectangle {
                    height: itemHeight
                    width: itemWidth * left_Label_WidthPercent
                    // color: "red"
                    Label {
                        text: "Switch  3"
                        anchors.centerIn: parent
                        font.family: "Comic Sans MS"
                        color: "#595959"
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * middle_Comment_WidthPercent
                    // color: "green"
                    TextField {
                        id: textfield_3
                        anchors.centerIn: parent
                        width: parent.width
                        height: parent.height - 6
                        placeholderText: "Comment"
                        color: "#595959"
                        background: Rectangle {
                            anchors.fill: parent
                            radius: 8
                            // color: "transparent"
                            // color: "#dfffef"
                            // Rectangle {
                            //     anchors.fill: parent
                            //     anchors.bottomMargin: 2
                            // }
                            border.color: "#dfffef"
                            border.width: 2
                        }
                        leftPadding: 12
                        rightPadding: 12
                        // font.family: "Segoe UI Semilight"
                        font.family: "Comic Sans MS"
                        font.pointSize: 9
                        onTextChanged: {
                            mQmlRelaySwitchService.m_s3Comment = text
                        }
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * right_Switch_WidthPercent
                    // color: "blue"
                    MySwitch {
                        id: switch_3
                        anchors.centerIn: parent
                        onClicked: {
                            mQmlRelaySwitchService.setSwitchStatus2MainService(3, !mQmlRelaySwitchService.m_s3);
                        }
                    }
                }
            }
        }
        Rectangle {
            /* ***************************************  4  **********************************/
            id: rect_switch4_chunk
            border.color: "black"
            height: itemHeight
            width: itemWidth
            Row {
                Rectangle {
                    height: itemHeight
                    width: itemWidth * left_Label_WidthPercent
                    // color: "red"
                    Label {
                        text: "Switch  4"
                        anchors.centerIn: parent
                        font.family: "Comic Sans MS"
                        color: "#595959"
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * middle_Comment_WidthPercent
                    // color: "green"
                    TextField {
                        id: textfield_4
                        anchors.centerIn: parent
                        width: parent.width
                        height: parent.height - 6
                        placeholderText: "Comment"
                        color: "#595959"
                        background: Rectangle {
                            anchors.fill: parent
                            radius: 8
                            // color: "transparent"
                            // color: "#dfffef"
                            // Rectangle {
                            //     anchors.fill: parent
                            //     anchors.bottomMargin: 2
                            // }
                            border.color: "#dfffef"
                            border.width: 2
                        }
                        leftPadding: 12
                        rightPadding: 12
                        // font.family: "Segoe UI Semilight"
                        font.family: "Comic Sans MS"
                        font.pointSize: 9
                        onTextChanged: {
                            mQmlRelaySwitchService.m_s4Comment = text
                        }
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * right_Switch_WidthPercent
                    // color: "blue"
                    MySwitch {
                        id: switch_4
                        anchors.centerIn: parent
                        onClicked: {
                            mQmlRelaySwitchService.setSwitchStatus2MainService(4, !mQmlRelaySwitchService.m_s4);
                        }
                    }
                }
            }
        }
        Rectangle {
            /* ***************************************  5  **********************************/
            id: rect_switch5_chunk
            border.color: "black"
            height: itemHeight
            width: itemWidth
            Row {
                Rectangle {
                    height: itemHeight
                    width: itemWidth * left_Label_WidthPercent
                    // color: "red"
                    Label {
                        text: "Switch  5"
                        anchors.centerIn: parent
                        font.family: "Comic Sans MS"
                        color: "#595959"
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * middle_Comment_WidthPercent
                    // color: "green"
                    TextField {
                        id: textfield_5
                        anchors.centerIn: parent
                        width: parent.width
                        height: parent.height - 6
                        placeholderText: "Comment"
                        color: "#595959"
                        background: Rectangle {
                            anchors.fill: parent
                            radius: 8
                            // color: "transparent"
                            // color: "#dfffef"
                            // Rectangle {
                            //     anchors.fill: parent
                            //     anchors.bottomMargin: 2
                            // }
                            border.color: "#dfffef"
                            border.width: 2
                        }
                        leftPadding: 12
                        rightPadding: 12
                        // font.family: "Segoe UI Semilight"
                        font.family: "Comic Sans MS"
                        font.pointSize: 9
                        onTextChanged: {
                            mQmlRelaySwitchService.m_s5Comment = text
                        }
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * right_Switch_WidthPercent
                    // color: "blue"
                    MySwitch {
                        id: switch_5
                        anchors.centerIn: parent
                        onClicked: {
                            mQmlRelaySwitchService.setSwitchStatus2MainService(5, !mQmlRelaySwitchService.m_s5);
                        }
                    }
                }
            }
        }
        Rectangle {
            /* ***************************************  6  **********************************/
            id: rect_switch6_chunk
            border.color: "black"
            height: itemHeight
            width: itemWidth
            Row {
                Rectangle {
                    height: itemHeight
                    width: itemWidth * left_Label_WidthPercent
                    // color: "red"
                    Label {
                        text: "Switch  6"
                        anchors.centerIn: parent
                        font.family: "Comic Sans MS"
                        color: "#595959"
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * middle_Comment_WidthPercent
                    // color: "green"
                    TextField {
                        id: textfield_6
                        anchors.centerIn: parent
                        width: parent.width
                        height: parent.height - 6
                        placeholderText: "Comment"
                        color: "#595959"
                        background: Rectangle {
                            anchors.fill: parent
                            radius: 8
                            // color: "transparent"
                            // color: "#dfffef"
                            // Rectangle {
                            //     anchors.fill: parent
                            //     anchors.bottomMargin: 2
                            // }
                            border.color: "#dfffef"
                            border.width: 2
                        }
                        leftPadding: 12
                        rightPadding: 12
                        // font.family: "Segoe UI Semilight"
                        font.family: "Comic Sans MS"
                        font.pointSize: 9
                        onTextChanged: {
                            mQmlRelaySwitchService.m_s6Comment = text
                        }
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * right_Switch_WidthPercent
                    // color: "blue"
                    MySwitch {
                        id: switch_6
                        anchors.centerIn: parent
                        onClicked: {
                            mQmlRelaySwitchService.setSwitchStatus2MainService(6, !mQmlRelaySwitchService.m_s6);
                        }
                    }
                }
            }
        }
        Rectangle {
            /* ***************************************  7  **********************************/
            id: rect_switch7_chunk
            border.color: "black"
            height: itemHeight
            width: itemWidth
            Row {
                Rectangle {
                    height: itemHeight
                    width: itemWidth * left_Label_WidthPercent
                    // color: "red"
                    Label {
                        text: "Switch  7"
                        anchors.centerIn: parent
                        font.family: "Comic Sans MS"
                        color: "#595959"
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * middle_Comment_WidthPercent
                    // color: "green"
                    TextField {
                        id: textfield_7
                        anchors.centerIn: parent
                        width: parent.width
                        height: parent.height - 6
                        placeholderText: "Comment"
                        color: "#595959"
                        background: Rectangle {
                            anchors.fill: parent
                            radius: 8
                            // color: "transparent"
                            // color: "#dfffef"
                            // Rectangle {
                            //     anchors.fill: parent
                            //     anchors.bottomMargin: 2
                            // }
                            border.color: "#dfffef"
                            border.width: 2
                        }
                        leftPadding: 12
                        rightPadding: 12
                        // font.family: "Segoe UI Semilight"
                        font.family: "Comic Sans MS"
                        font.pointSize: 9
                        onTextChanged: {
                            mQmlRelaySwitchService.m_s7Comment = text
                        }
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * right_Switch_WidthPercent
                    // color: "blue"
                    MySwitch {
                        id: switch_7
                        anchors.centerIn: parent
                        onClicked: {
                            mQmlRelaySwitchService.setSwitchStatus2MainService(7, !mQmlRelaySwitchService.m_s7);
                        }
                    }
                }
            }
        }
        Rectangle {
            /* ***************************************  8  **********************************/
            id: rect_switch8_chunk
            border.color: "black"
            height: itemHeight
            width: itemWidth
            Row {
                Rectangle {
                    height: itemHeight
                    width: itemWidth * left_Label_WidthPercent
                    // color: "red"
                    Label {
                        text: "Switch  8"
                        anchors.centerIn: parent
                        font.family: "Comic Sans MS"
                        color: "#595959"
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * middle_Comment_WidthPercent
                    // color: "green"
                    TextField {
                        id: textfield_8
                        anchors.centerIn: parent
                        width: parent.width
                        height: parent.height - 6
                        placeholderText: "Comment"
                        color: "#595959"
                        background: Rectangle {
                            anchors.fill: parent
                            radius: 8
                            // color: "transparent"
                            // color: "#dfffef"
                            // Rectangle {
                            //     anchors.fill: parent
                            //     anchors.bottomMargin: 2
                            // }
                            border.color: "#dfffef"
                            border.width: 2
                        }
                        leftPadding: 12
                        rightPadding: 12
                        // font.family: "Segoe UI Semilight"
                        font.family: "Comic Sans MS"
                        font.pointSize: 9
                        onTextChanged: {
                            mQmlRelaySwitchService.m_s8Comment = text
                        }
                    }
                }
                Rectangle {
                    height: itemHeight
                    width: itemWidth * right_Switch_WidthPercent
                    // color: "blue"
                    MySwitch {
                        id: switch_8
                        anchors.centerIn: parent
                        onClicked: {
                            mQmlRelaySwitchService.setSwitchStatus2MainService(8, !mQmlRelaySwitchService.m_s8);
                        }
                    }
                }
            }
        }
    }
}
